<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<table style="width: 100%; height: 100%; border-collapse: collapse;">
	<tr>
		<td id="sidebar">
			<div style="height: 100%;">
				<div id="accordion">
					<div class="markerManager">
						<h3>
							<a href="#"><spring:message code="markers.menu.header" /></a>
						</h3>
						<div class="accordionContent">
							<ul>
								<li>
									<div style="font-weight: normal;">
										<p><spring:message code="markers.menu.addmarkerInfo" /></p>
										<div
											style="width: 100%; text-align: center; margin-top: 10px;">
											<div style="display: inline-block; position: relative;">
												<div id="draggableMarker" class="customMarker"></div>
											</div>
											<div class="clear"></div>
										</div>
										<br>
										<p><spring:message code="markers.menu.editmarkerInfo" /></p>
										<br>
										<p><spring:message code="markers.menu.deletemarkerInfo" /></p>
									</div>
								</li>
							</ul>
							<hr />
							<p style="font-weight: bold; font-size: 14px;">Pokaż znaczniki znajomych:</p>
							<br>
							<div id="friendsMarkersList">
								<ul id="friendsList-markers" class="sortable">
								</ul>
							</div>
						</div>
					</div>
					<div>
						<h3>
							<a href="#">Pozycja znajomych</a>
						</h3>
						<div class="accordionContent">
							<ul>
								<li>
									<p><a id="showFriends">Pokaż pozycje znajomych</a></p>
									<br>
								</li>
								<li>
									<p><a id="hideFriends">Ukryj pozycje znajomych</a></p>
									<br>
								</li>
							</ul>
							<hr />
							<p style="font-weight: bold; font-size: 14px;">Lista znajomych online: <span class="friendsCount"></span></p>
							<br>
							<div id="onlineFriendsList">
								<ul id="friendsList-online" class="sortable">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="info">
				<!-- PRZYKŁADOWA REKLAMA -->
			</div>
		</td>
		<td style="height: 100%;">
			<div id="map-canvas" style="height: 100%;"><div id="droppable" style="width: 100%; height: 100%; display: none;"></div></div>
		</td>
	</tr>
</table>
<div id="markerAddEditDialog" title="<spring:message code="markers.form.header" />">
	<form id="dropdownMarkerAddEditForm" class="vertical" method="post">
		<fieldset>
			<ul>
				<li><label for="name" class="label"><spring:message
							code="markers.form.name" /></label>
					<div class="inputWrapper">
						<div class="cap">
							<input id="marker_name" type="text" name="name" value="">
						</div>
					</div>
					<div class="clear"></div></li>
				<li><label class="label"><spring:message code="markers.form.address" />:</label> <span class="currentAddress"></span><input type="hidden" name="address" id="marker_address" value=""></li>
				<li><label class="label"><spring:message code="markers.form.type" />:</label>
					<div id="marker_types" style="display: inline-block;"></div>
				</li>
				<li><label for="description" class="label"><spring:message
							code="markers.form.desc" /></label>
					<div class="textareaWrapper">
							<textarea id="marker_description" name="description" maxlength="600" style="resize: none;"></textarea>
					</div>
					<div class="clear"></div></li>
				<li>
				<input type="hidden" name="id" id="marker_id" value="">
				<input type="hidden" name="latitude" id="marker_latitude" value="">
				<input type="hidden" name="longitude" id="marker_longitude" value="">
				<input type="hidden" name="author" id="marker_author" value="">
					<button class="btn" type="submit">
						<div>
							<span><spring:message code="markers.form.save" /></span>
						</div>
					</button>
					<div class="clear"></div>
				</li>
			</ul>
			<div class="clear"></div>
		</fieldset>
	</form>
</div>

<div id="confirmMarkerDeleteDialog" title="Czy chcesz usunąć ten znacznik?">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Ten znacznik zostanie całkowicie usunięty z systemu. Czy jesteś pewien?</p>
</div>

<script type="text/javascript">
	$("#accordion").accordion({
		collapsible : true,
		fillSpace : true,
		header : "h3"
	});
	$(window).resize(function() {
		$("#accordion").accordion("resize");
	});

	MapsManager.initialize();

	$("#markerAddEditDialog").dialog({
		autoOpen : false,
		height : 500,
		width : 390,
		resizable: false,
		close : function(ev, ui) {
			// if X in dialog box was clicked
			
			if(event.target.nodeName != null && MarkerManager.currentAction != "edit")
				MarkerManager.removeMarker(MarkerManager.lastCreatedMarker);
		}
	});
	
	$("#draggableMarker").draggable(
			{
				helper : 'clone',
				appendTo : '#map-canvas',
				stop : function(event, ui) {

				}
			});
	$( "#map-canvas" ).droppable({
		accept: "#draggableMarker",
		drop: function( event, ui ) {
			if (isLogged == 'true') {
				// sidebar width (300) && marker width and height (21x21)
				var left = ui.position.left + 10;
				var top = ui.position.top + 11;
				
				var point = new google.maps.Point(left,top);
				
				//alert(ui.position.left + " " + ui.position.top);
				var location = MapsManager.overlay.getProjection()
						.fromContainerPixelToLatLng(point);

				var newUserMarker = new userMarker(-10, "Nazwa miejsca", "adres miejsca",
						"Opis miejsca", location.lng(), location.lat(), "Miejsce",
						username);
				MarkerManager.addMarker(newUserMarker);
				
				getAddressFromLatLng(location);
				
				$("#marker_id").val('');
				$("#marker_name").val('');
				$("#marker_description").val('');
				$("#marker_author").val(username);
				
				$("#marker_types").html(MarkerTypes.getSelectBox(I18N.locale));
				
				$("#markerAddEditDialog").dialog("open");
			}
			else
			{
				NotificationManager.alertNotification(I18N.msg.loginErrorTitle, I18N.msg.loginErrorText);
			}
		}
	});
	
</script>
